<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<!-- 富文本编辑器 js引入-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.all.min.js}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/common.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript">
$(document).ready(function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
});
window.onresize = function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
}
</script>
<style type="text/css">
.layui-form-label{
	width: 180px !important;	
}
.layui-input-inline{
	width: 240px !important;
}
</style>
</head>
<body class="layui-layout-body">
	<div id="addDiv" align="center" style="overflow:auto;">
		<div style="margin-top: 50px;">
			<form id="addForm" class="layui-form layui-form-pane"
				th:action="@{/functional/add_manager}" method="post">
				<div class="layui-form-item" style="display: none;">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>服务ID</label>
						<div class="layui-input-inline">
							<input name="id" placeholder="服务ID" style="display: none;" 
								class="layui-input" maxlength="30" th:value="${appServer != null ? appServer.id : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>名称</label>
						<div class="layui-input-inline">
							<input name="name" placeholder="最多6个汉字，不支持其他符号"
								class="layui-input" maxlength="6" th:value="${appServer != null ? appServer.name : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="layui-input-inline" style="width: 500px !important;" align="center">
							<img th:src="${appServer != null ? appServer.image : '/images/def_icon.png'}" th:src="@{/images/def_icon.png}" style="width: 60px;height: 60px;display: block;" id="previewImg">
							<span> (建议尺寸120*120，大小不超过100KB)</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>图标</label>
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<input type="text" name="image" style="display: none;" th:value="${appServer != null ? appServer.image : ''}">
							<input type="button" value="浏览" class="layui-input" onclick="selectFile()" style="width: 200px;">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>服务类型</label>
						<div class="layui-input-inline">
							<select name="self">
								<option value="0" th:selected="${appServer != null ? appServer.self == 0 : 'false'}">第三方</option>
								<option value="1" th:selected="${appServer != null ? appServer.self == 1 : 'false'}">自研</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>跳转类型</label>
						<div class="layui-input-inline">
							<select name="type" lay-filter="typeSelect">
								<option value="0" th:selected="${appServer != null ? appServer.type == 0 : 'false'}">超链接</option>
								<option value="1" th:selected="${appServer != null ? appServer.type == 1 : 'false'}">H5</option>
								<option value="2" th:selected="${appServer != null ? appServer.type == 2 : 'false'}">原生话题贴</option>
								<option value="3" th:selected="${appServer != null ? appServer.type == 3 : 'false'}">门禁</option>
								<option value="4" th:selected="${appServer != null ? appServer.type == 4 : 'false'}">小组</option>
								<option value="5" th:selected="${appServer != null ? appServer.type == 5 : 'false'}">群聊</option>
							</select>
						</div>
					</div>
				</div>
				<div th:if="${(appServer != null && (appServer.type == 0 || appServer.type == 1)) || appServer == null}" class="layui-form-item" id="urlDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>跳转地址</label>
						<div class="layui-input-inline">
							<input name="url" placeholder="跳转地址" class="layui-input"
								maxlength="200" th:value="${appServer != null ? appServer.url : ''}">
						</div>
					</div>
				</div>
				<div th:if="${!(appServer != null && (appServer.type == 0 || appServer.type == 1))}" class="layui-form-item" id="urlDiv" style="display:none;">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>跳转地址</label>
						<div class="layui-input-inline">
							<input name="url" placeholder="跳转地址" class="layui-input"
								maxlength="200" th:value="${appServer != null ? appServer.url : ''}">
						</div>
					</div>
				</div>
				
				<div th:if="${(appServer != null && appServer.type == 1)}" class="layui-form-item" id="appIdDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>开发者平台appid：</label>
						<div class="layui-input-inline">
							<input name="appId" placeholder="开发者平台appid" class="layui-input"
								value="" maxlength="10" th:value="${appServer != null ? appServer.appId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${!(appServer != null && appServer.type == 1)}" class="layui-form-item" id="appIdDiv" style="display: none;">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>开发者平台appid：</label>
						<div class="layui-input-inline">
							<input name="appId" placeholder="开发者平台appid" class="layui-input"
								value="" maxlength="10" th:value="${appServer != null ? appServer.appId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${(appServer != null && appServer.type == 2)}" class="layui-form-item" id="contentIdDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>帖子ID：</label>
						<div class="layui-input-inline">
							<input name="contentId" placeholder="帖子ID" class="layui-input"
								value="" maxlength="100" th:value="${appServer != null ? appServer.contentId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${!(appServer != null && appServer.type == 2)}" class="layui-form-item" id="contentIdDiv" style="display: none;">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>帖子ID：</label>
						<div class="layui-input-inline">
							<input name="contentId" placeholder="帖子ID" class="layui-input"
								value="" maxlength="100" th:value="${appServer != null ? appServer.contentId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${(appServer != null && (appServer.type == 4 || appServer.type == 2))}" class="layui-form-item" id="goGroupIdDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>小组的feedId：</label>
						<div class="layui-input-inline">
							<input name="goGroupId" placeholder="小组的feedId" class="layui-input"
								value="" maxlength="100" th:value="${appServer != null ? appServer.goGroupId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${!(appServer != null && (appServer.type == 4 || appServer.type == 2))}" class="layui-form-item" id="goGroupIdDiv" style="display: none;">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>小组的feedId：</label>
						<div class="layui-input-inline">
							<input name="goGroupId" placeholder="小组的feedId" class="layui-input"
								value="" maxlength="100" th:value="${appServer != null ? appServer.goGroupId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${(appServer != null && appServer.type == 5)}" class="layui-form-item" id="groupChatIdDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>群聊ID：</label>
						<div class="layui-input-inline">
							<input name="groupChatId" placeholder="群聊ID" class="layui-input"
								value="" maxlength="100" th:value="${appServer != null ? appServer.groupChatId : ''}">
						</div>
					</div>
				</div>
				<div th:if="${!(appServer != null && appServer.type == 5)}" class="layui-form-item" id="groupChatIdDiv" style="display: none;">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>群聊ID：</label>
						<div class="layui-input-inline">
							<input name="groupChatId" placeholder="群聊ID" class="layui-input"
								value="" maxlength="100" th:value="${appServer != null ? appServer.groupChatId : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>所属分类</label>
						<div class="layui-input-inline">
							<select name="categoryId">
								<option th:each="item:${appCategories}" th:value="${item.id}"
									th:text="${item.name}" th:selected="${appServer != null ? appServer.categoryId == item.id : 'false'}">超链接</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>认证类别</label>
						<div class="layui-input-inline" style="width: 500px !important;" align="left">
							<input type="radio" name="authorization" value="0" title="不需要认证" th:checked="${appServer != null ? appServer.authorization == 0 : 'true'}"/>
							<input type="radio" name="authorization" value="1" title="身份证认证" th:checked="${appServer != null ? appServer.authorization == 1 : 'false'}"/>
							<input type="radio" name="authorization" value="2" title="人脸识别认证" th:checked="${appServer != null ? appServer.authorization == 2 : 'false'}"/>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>支持系统</label>
						<div class="layui-input-inline" style="width: 500px !important;" align="left">
							<input type="radio" name="platform" value="0" title="全部" th:checked="${appServer != null ? appServer.platform == 0 : 'true'}"/> 
							<input type="radio" name="platform" value="2" title="Android" th:checked="${appServer != null ? appServer.platform == 2 : 'false'}"/>
							<input type="radio" name="platform" value="1" title="IOS" th:checked="${appServer != null ? appServer.platform == 1 : 'false'}"/> 
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>排序：</label>
						<div class="layui-input-inline">
							<input name="sort" placeholder="排序" class="layui-input" value=""
								maxlength="4" th:value="${appServer != null ? appServer.sort : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="layui-input-inline" style="width: 500px !important;" align="left">
							<input type="radio" name="isRecommend" value="0" title="推荐" th:checked="${appServer != null ? appServer.isRecommend == 0 : 'true'}"/> 
							<input type="radio" name="isRecommend" value="1" title="取消推荐" th:checked="${appServer != null ? appServer.isRecommend == 1 : 'false'}"/>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<input onchange="onFileChange(event)" type="file" name="icon" id="qiniuFile" style="display: none;">
	<script type="text/javascript">
		function selectFile(){
			$("#qiniuFile").click();
		}
		function onFileChange(e) {
			let files = e.target.files || e.dataTransfer.files;
			if (!files.length) {
				return;
			}
			if (files[0]['size'] > 100000) {
				layer.msg("图片大小不能超过100KB哦！");
				return false;
			}
			createImage(files);
		}
		function createImage(file, val) {
			var mypic = document.getElementById("qiniuFile").files[0];
			var windowUrl = window.URL.createObjectURL(mypic);
			// 创建对象
			var img = new Image()
			// 改变图片的src
			img.src = windowUrl
			img.onload = function(){
		        // 打印
		        if (img.width != 120 || img.height != 120) {
		        	layer.msg("图片比例只能为120*120哦！");
					return false;
		        }
		        uploadImg(file);
		    } 
		}
		function uploadImg(file){
			$.get('http://qiniu.systoon.com/getToken.php', function(e) {
				var formData = new FormData();
				formData.append('token', e);
				formData.append('file', file[0]);
				$.ajax({
					url : 'http://upload.qiniu.com',
					type : 'POST',
					data : formData,
					async : false,
					cache : false,
					contentType : false,
					processData : false,
					success : function(e) {
						var url = 'http://apr.qiniu.toon.mobi/' + e.key;
						console.warn(url);
						$("#previewImg").attr("src",url);
						$("form input[name='image']").val(url);
					},
					error : function(e) {
						layer.msg('upload error' + e);
					}
				});
			});
		}
		layui.use(['form'], function(){
			  var formObj = layui.form;
			  formObj.on('select(typeSelect)',function(data){
				  $("#urlDiv").css({"display":"none"});
				  $("#appIdDiv").css({"display":"none"});
				  $("#contentIdDiv").css({"display":"none"});
				  $("#goGroupIdDiv").css({"display":"none"});
				  $("#groupChatIdDiv").css({"display":"none"});
				  if(data.value == 0){
					  $("#urlDiv").css({"display":"block"});
				  }
				  if(data.value == 1){
					  $("#urlDiv").css({"display":"block"});
					  $("#appIdDiv").css({"display":"block"});
				  }
				  if(data.value == 2){
					  $("#contentIdDiv").css({"display":"block"});
					  $("#goGroupIdDiv").css({"display":"block"});
				  }
				  if(data.value == 4){
					  $("#goGroupIdDiv").css({"display":"block"});
				  }
				  if(data.value == 5){
					  $("#groupChatIdDiv").css({"display":"block"});
				  }
			  });
		});
	</script>
</body>
</html>